<template>
<div>
  <div class="shopcart" v-for="(item,index) in shopcart" :key="index">
		<div class="image">
			<img :src="item.src" >
		</div>
		<div class="content">
			<p>{{item.title}}x{{item.num}} </p>
			<p class="price">￥{{item.price}}</p>
			<p><button type="button" @click="del(item)">删除</button></p>
		</div>
  </div>
  <div class="totalPrice">
  	商品总价格为：<span>￥{{totalPrice}}</span>
  </div>
  </div>
</template>
<script >
	export default {
		name: 'shopcart',
		computed:{
			  shopcart(){
				  return this.$store.state.shopcart
			  },
			  // total(){
			  // 	return this.$store.state.total
			  // },
			  // num(){
			  // 	return this.$store.state.num
			  // },
			  totalPrice(){
				  return this.$store.getters.totalPrice;
			  }
		},
		methods:{
			  del(item){
				  this.$store.commit('del',item)
			  }
		}
	}
	
</script>
<style type="text/css">
	.totalPrice{
		margin: 15px;
		height: 30px;
		line-height: 30px;
		text-align: left;
		border: #504506 3px solid;
		border-radius: 8px;
		padding: 15px;
		font-size: 14px;
	}
	.totalPrice span{
		color: #ff7f50;
		font-weight:  bold;
		font-size: 20px;
	}
	.shopcart{
		/* width: 400px; */
		height: 150px;
		display: flex;
		border-bottom: 1px solid #f8edf0;
		margin: 15px;
		/* background-color: #FEF5EF; */
		/* justify-content: center;
		align-items: center;
		 */
		flex-direction: row;
		align-items: center;
	}
	.image{
		width: 120px;
		height: 120px;
		border: #ccc 1px solid;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px;
	}
	.image img{
		width: 110px;
		height: 110px;
	}
	.content{
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		justify-content: space-between;
	}
	.content p{
		font-size: 14px;
	/* 	color: #F18741; */
		height: 20px;
		line-height: 20px;
		/* border: #2C3E50 1px solid; */
	}
	.price{
		color: #f00;
	}
	button{
		background-color:coral ;
		color: #F8EDF0;
	}
</style>
